<template>
  <div class="conponents_search">
    <n-input
      class="chart_input"
      placeholder="请输入组件名称"
      :on-change="inputChange"
      clearable
      v-model="inputValue"
    >
      <template #suffix>
        <n-icon :component="Search" />
      </template>
    </n-input>
  </div>
</template>

<script lang="ts" setup>
  import { Search } from '@vicons/ionicons5';
  interface Props {
    modelValue: string;
  }
  const props = defineProps<Props>();
  const emit = defineEmits({
    'update:modelValue': (value: string) => {},
    change: (value: string) => {},
  });
  const inputValue = ref('');
  onBeforeMount(() => {
    inputValue.value = props.modelValue;
  });
  function inputChange(value: string) {
    emit('update:modelValue', value);
    emit('change', value);
  }
</script>

<style scoped lang="scss">
  .conponents_search {
    width: 100%;
    margin-bottom: 10px;
    padding: 0 16px;
    ::v-deep ::-webkit-input-placeholder {
      color: $text-grey;
      -webkit-text-fill-color: $text-grey;
    }
  }
</style>
